<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
		
	</head>
	<body>
	<h1>1-图片轮播</h1>	
	<h2>1.1-可选标题</h2>
	<h2>1.2-详细配置</h2>
	<pre>
	通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。 
	属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。 
	使用 data-slide-to 来向轮播床底一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。 
	data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。 
	通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示： 
	$('.carousel').carousel()
	</pre>
	
	<h3>1.3-选项</h3>
	<p>有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项</p>
	<table class="table">
		<tr><th>选项名称</th><th>类型/默认值</th><th>Data 属性名称</th><th>描述</th></tr>
		<tr>
			<td>interval</td>
			<td>number<br> <i>默认值：5000</i></td>
			<td>data-interval</td>
			<td>自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。</td>
		</tr>
		<tr>
			<td>pause</td>
			<td>string<br> <i>默认值："hover"</i></td>
			<td>data-pause</td>
			<td>鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。</td>
		</tr>
		<tr>
			<td>wrap</td>
			<td>boolean<br> <i>默认值：true</i></td>
			<td>data-wrap</td>
			<td>轮播是否连续循环。</td>
		</tr>
	</table>
	<h3>1.4-方法</h3>
	<p>下面是一些轮播（Carousel）插件中有用的方法：</p>
	<table class="table">
		<tr>
			<th>方法</th>
			<th>描述</th>
			<th>实例</th>
		</tr>
		<tr>
			<td>.carousel(options)</td>
			<td>初始化轮播为可选的 options 对象，并开始循环项目。</td>
			<td> <pre >
	$('#identifier').carousel({
	  interval: 2000
	})
	</pre></td>
		</tr>
		<tr>
			<td>.carousel('cycle')</td>
			<td>从左到右循环轮播项目。</td>
			<td> <pre>
	$('#identifier').carousel('cycle')
	</pre></td>
		</tr>
		<tr>
			<td>.carousel('pause')</td>
			<td>停止轮播循环项目。</td>
			<td> <pre>
	$('#identifier')..carousel('pause')</pre></td>
		</tr>
		<tr>
			<td>.carousel(number)</td>
			<td>循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。</td>
			<td> <pre>
	$('#identifier').carousel(number)</pre></td>
		</tr>
		<tr>
			<td>.carousel('prev')</td>
			<td>循环轮播到上一个项目。</td>
			<td> <pre>
	$('#identifier').carousel('prev')</pre></td>
		</tr>
		<tr>
			<td>.carousel('next')</td>
			<td>循环轮播到下一个项目。</td>
			<td> <pre>
	$('#identifier').carousel('next')</pre></td>
		</tr>
	</table>
	
	<h3>1.5-事件</h3>
	<p>下表列出了轮播（Carousel）插件中要用到的事件。这些事件可在函数中当钩子使用。</p>
	<table class="reference notranslate">
		<tr><th>事件</th><th>描述</th><th>实例</th></tr>
		<tr>
			<td>slide.bs.carousel</td>
			<td>当调用 slide 实例方法时立即触发该事件。</td>
			<td> <pre>
				$('#identifier').on('slide.bs.carousel', function () {
				  // 执行一些动作...
				})
			</pre></td>
		</tr>
		<tr>
			<td>slid.bs.carousel</td>
			<td>当轮播完成幻灯片过渡效果时触发该事件。</td>
			<td> <pre>
				$('#identifier').on('slid.bs.carousel', function () {
				  // 执行一些动作...
				})
			</pre></td>
		</tr>
	</table>
	
	<h3>1.6-实例</h3>
	
	<div id="myCarousel2" class="carousel slide">
		<!-- 轮播（Carousel）指标 -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel2" data-slide-to="1"></li>
			<li data-target="#myCarousel2" data-slide-to="2"></li>
		</ol>
		<!-- 轮播（Carousel）项目 -->
		<div class="carousel-inner">
			<div class="item active">
				<img src="../img/HBuilder.png" alt="First slide">
				<div class="carousel-caption"><font color="red">标题 1</font></div>
			</div>
			<div class="item">
				<img src="../img/HBuilder.png" alt="Second slide">
				<div class="carousel-caption"><font color="red">标题 1</font></div>
			</div>
			<div class="item">
				<img src="../img/HBuilder.png" alt="Third slide">
				<div class="carousel-caption"><font color="red">标题 1</font></div>
			</div>
		</div>
		<!-- 轮播（Carousel）导航 -->
		<a class="carousel-control left" href="#myCarousel2" data-slide="prev">&lsaquo;</a>
		<a class="carousel-control right" href="#myCarousel2" data-slide="next">&rsaquo;</a>
		<!-- 控制按钮 -->
		<div style="text-align:center;">
			<input type="button" class="btn start-slide" value="Start">
			<input type="button" class="btn pause-slide" value="Pause">
			<input type="button" class="btn prev-slide" value="Previous Slide">
			<input type="button" class="btn next-slide" value="Next Slide">
			<input type="button" class="btn slide-one" value="Slide 1">
			<input type="button" class="btn slide-two" value="Slide 2">
			<input type="button" class="btn slide-three" value="Slide 3">
		</div>
	</div>
	<script>
		$(function() {
			// 初始化轮播
			$(".start-slide").click(function() {
				$("#myCarousel2").carousel('cycle');
			});
			// 停止轮播
			$(".pause-slide").click(function() {
				$("#myCarousel2").carousel('pause');
			});
			// 循环轮播到上一个项目
			$(".prev-slide").click(function() {
				$("#myCarousel2").carousel('prev');
			});
			// 循环轮播到下一个项目
			$(".next-slide").click(function() {
				$("#myCarousel2").carousel('next');
			});
			// 循环轮播到某个特定的帧 
			$(".slide-one").click(function() {
				$("#myCarousel2").carousel(0);
			});
			$(".slide-two").click(function() {
				$("#myCarousel2").carousel(1);
			});
			$(".slide-three").click(function() {
				$("#myCarousel2").carousel(2);
			});
			
			//添加事件：当调用 slide 实例方法时立即触发该事件。
			$('#myCarousel2').on('slide.bs.carousel', function () {
		        alert("当调用 slide 实例方法时立即触发该事件。");
		    });

			
		});
	</script>

	
	
	
	
	</body>
</html>
